<template>
	<el-dialog v-model="dialog" :title="state.form.id ? '修改租户' : '添加租户'" width="60%" :before-close="handleClose">
		<el-form ref="formRef" :model="state.form" label-width="120px" :rules="state.rules" status-icon>
			<el-row>
				<el-col :span="12">
					<el-form-item label="租户名" prop="name"> <el-input v-model="state.form.name" show-word-limit maxlength="50"></el-input> </el-form-item>
					<el-form-item label="官网" prop="siteUrl">
						<el-input v-model="state.form.siteUrl"></el-input>
					</el-form-item>
					<el-form-item label="有效时间" prop="datatimes">
						<el-date-picker
							v-model="state.form.datatimes"
							type="datetimerange"
							range-separator="-"
							start-placeholder="授权开始时间"
							end-placeholder="授权结束时间"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
					<el-form-item label="租户套餐" prop="packageId">
						<el-select v-model="state.form.packageId" clearable :disabled="state.form.id" style="width: 100%">
							<el-option v-for="(item, index) in state.tenantPackageList" :key="index" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="登录账号" prop="username" v-if="!state.form.id">
						<el-input v-model="state.form.username"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="地址" prop="address">
						<el-input v-model="state.form.address"></el-input>
					</el-form-item>
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="state.form.email"></el-input>
					</el-form-item>
					<el-form-item label="手机号" prop="phone">
						<el-input v-model="state.form.phone"></el-input>
					</el-form-item>
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="state.form.status">
							<el-radio v-for="item in status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="登录密码" prop="password" v-if="!state.form.id">
						<el-input type="password" show-password v-model="state.form.password"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="handleClose">关 闭</el-button>
				<el-button type="primary" :loading="loading" @click="submitForm(formRef)">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { addObj, editObj, getById } from '/@/api/upms/tenant';
import { getList } from '/@/api/upms/tenantpackage';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { useDict } from '/@/utils/dict';
const emit = defineEmits(['initPage']);
interface State {
	form: {
		id: string | undefined;
		name: string;
		status: string;
		address: string;
		siteUrl: string;
		email: string;
		phone: string;
		datatimes: Array<string>;
		username: string;
		password: string;
		authBeginTime: string;
		authEndTime: string;
		packageId: string;
	};
	rules: any;
	tenantPackageList: Array<any>;
}
// 字典
const { status } = useDict('status');
const state = reactive<State>({
	form: {
		id: undefined,
		name: '',
		status: '1',
		address: '',
		siteUrl: '',
		email: '',
		phone: '',
		datatimes: [],
		username: '',
		password: '',
		authBeginTime: '',
		authEndTime: '',
		packageId: '',
	},
	rules: {
		name: [
			{
				required: true,
				message: '请输入租户名',
				trigger: 'change',
			},
		],
		address: [
			{
				required: true,
				message: '请输入租户地址',
				trigger: 'change',
			},
		],
		siteUrl: [
			{
				required: true,
				message: '请输入租户官网',
				trigger: 'change',
			},
		],
		email: [
			{
				pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
				message: '邮箱格式错误',
				trigger: 'blur',
			},
		],
		phone: [
			{
				required: true,
				message: '请输入手机号',
				trigger: 'change',
			},
			{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对', trigger: 'blur' },
		],
		packageId: [
			{
				required: true,
				message: '请选择租户套餐',
				trigger: 'change',
			},
		],
		status: [
			{
				required: true,
				message: '请选择状态',
				trigger: 'change',
			},
		],
		username: [
			{
				required: true,
				message: '请输入登录账号',
				trigger: 'change',
			},
		],
		password: [
			{
				required: true,
				message: '请输入登录密码',
				trigger: 'change',
			},
		],
	},
	tenantPackageList: [],
});
const dialog = ref(false);
const loading = ref(false);
const formRef = ref();
const initForm = (row: any | undefined) => {
	dialog.value = true;
	getTenantPackageList();
	if (row && row.id) {
		getDetail(row.id);
	}
};
const getDetail = (id: string) => {
	loading.value = true;
	getById(id).then((response: any) => {
		state.form = response.data.data;
		state.form.datatimes = [response.data.data.authBeginTime, response.data.data.authEndTime];
		loading.value = false;
	});
};
/**
 * 关闭事件
 */
const handleClose = () => {
	resetForm(formRef.value);
};
/**
 * 重置表单
 */
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	state.form.id = undefined;
	loading.value = false;
	dialog.value = false;
	formEl.resetFields();
};
/**
 * 提交按钮
 */
const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid, fields) => {
		if (valid) {
			loading.value = true;
			state.form.authBeginTime = state.form.datatimes[0];
			state.form.authEndTime = state.form.datatimes[1];
			if (state.form.id) {
				//修改
				edit();
			} else {
				//新增
				add();
			}
		}
	});
};
/**
 * 新增
 */
const add = () => {
	addObj(state.form)
		.then(() => {
			resetForm(formRef.value);
			ElMessage.success('新增成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};
/**
 * 修改
 */
const edit = () => {
	editObj(state.form)
		.then(() => {
			resetForm(formRef.value);
			ElMessage.success('修改成功');
			emit('initPage');
		})
		.catch(() => {
			loading.value = false;
		});
};

const getTenantPackageList = () => {
	getList({}).then((response) => {
		state.tenantPackageList = response.data.data;
	});
};
defineExpose({
	initForm,
});
</script>
